<!-- 需求审批流程设置 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="add">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建审批流程</template>
        </a-button>
      </template>
    </pageHeader>
  </div>

  <div class="content">
    <a-form :model="form" :style="{ width: '600px' }" auto-label-width>
      <a-form-item field="name" label="名称" :style="{ width: '300px' }">
        <a-input-search
          search-button
          :style="{ width: '320px' }"
          placeholder="请输入审批流程名称"
        />
      </a-form-item>
    </a-form>
    <a-table
      row-key="id"
      :data="data.list.data"
      :pagination="pagination"
      @page-change="pageChange($event)"
      @page-size-change="pageSizeChange($event)"
    >
      <template #columns>
        <a-table-column align="center" :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column data-index="name" align="center" title="名称">
        </a-table-column>
        <a-table-column
          data-index="templateId"
          align="center"
          title="关联需求模板"
        >
        </a-table-column>
        <a-table-column
          data-index="reCommit"
          align="center"
          title="审批被拒绝重新提交"
        >
          <template #cell="{ record }">
            {{
              record.reCommit === 1
                ? '返回审批流程初始层级'
                : '跳过审批流程已通过的层级，返回拒绝的层级'
            }}
          </template>
        </a-table-column>
        <a-table-column
          data-index="updatedUserStaffName"
          align="center"
          title="最后修改人"
        >
        </a-table-column>
        <a-table-column
          data-index="updatedAt"
          align="center"
          title="最后更新时间"
        >
          <template #cell="{ record }">
            {{ dayjs(record.ccreatedAt).format('YYYY-MM-DD') }}
          </template>
        </a-table-column>
        <a-table-column data-index="status" align="center" title="状态">
          <template #cell="{ record }">
            {{ record.status === 1 ? '启用' : '停用' }}
          </template>
        </a-table-column>
        <a-table-column align="center" :width="300" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-button type="text" @click="edit(record.id)">编辑</a-button>
            <a-button type="text" @click="changeStatus(record.id)">{{
              record.status === 1 ? '停用' : '启用'
            }}</a-button>
            <a-popconfirm
              @ok="deleteFlow(record.id)"
              content="确定删除吗"
              type="error"
            >
              <a-button
                type="text"
                :style="{
                  color: 'red',
                }"
                >删除</a-button
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
  <FlowSet
    ref="flowSetRef"
    :showTemplate="true"
    :conditionForm="flowData"
    :data="flowData.list"
    @update:data="saveData"
  ></FlowSet>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import {
    postBasisFlowSearch,
    delBasisFlow,
    putBasisFlowSwitchStatus,
  } from '@/api/home/System settings/basis-flow';
  import dayjs from 'dayjs';
  import FlowSet from '@/views/client-side/order-management/base-setting/demand-form/flow/flow-set.vue';
  import {
    postBasisFlow,
    getBasisFlow,
    putBasisFlow,
  } from '@/api/order-management/client-management/order';
  import type { FlowDataType, FlowItem } from '@/types/flow/index';
  import { Message } from '@arco-design/web-vue';

  const form = ref([]);
  const data = reactive({ list: { total: 0, data: [] } });
  // 分页配置
  const pagination = reactive({
    total: 0,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
  });
  const title = '客户需求审批设置';
  const breadCrumb = ['系统设置', '审批流程设置', '客户需求审批设置'];

  let flowData = reactive<FlowDataType>({
    list: {
      type: 1,
      templateId: 0,
      name: '',
      userStaffId: 0,
      userStaffName: '',
      description: '',
      nodeConfig: {
        type: 0,
        name: '发起人',
        sort: 0,
        auditType: 0,
        approverType: 0,
        approverTypeId: 0,
        nodeUserList: [],
        approverIsEmpty: 0,
        conditionNodes: [],
        childNode: null,
      },
      status: 0,
      reCommit: 1,
      updatedUserStaffId: 0,
      updatedUserStaffName: '',
    },
  });
  const reset = () => {
    flowData.list = {
      type: 1,
      templateId: 0,
      name: '',
      userStaffId: 0,
      userStaffName: '',
      description: '',
      nodeConfig: {
        type: 0,
        name: '发起人',
        sort: 0,
        auditType: 0,
        approverType: 0,
        approverTypeId: 0,
        nodeUserList: [],
        approverIsEmpty: 0,
        conditionNodes: [],
        childNode: null,
      },
      status: 0,
      reCommit: 1,
      updatedUserStaffId: 0,
      updatedUserStaffName: '',
    };
  };
  const flowParams = reactive({
    pageIndex: 0,
    pageSize: 10,
    type: 1,
  });
  const getData = async () => {
    let res = await postBasisFlowSearch(flowParams);
    data.list.total = res.Count;
    data.list.data = res.Data;
    pagination.total = res.Count;
  };
  // 数据条数改变时触发
  const pageSizeChange = (pageSize: any) => {
    flowParams.pageSize = pageSize;
  };
  //页码改变时触发
  const pageChange = (pageIndex: any) => {
    flowParams.pageIndex = pageIndex > 0 ? pageIndex - 1 : 0;
    getData();
  };
  const flowSetRef = ref();
  // 新建需求审批
  const add = async () => {
    reset();
    flowSetRef.value.fullScreen();
  };
  // 编辑需求审批
  const edit = async (id: number) => {
    let res = await getBasisFlow({ id });
    flowData.list = res;
    flowSetRef.value.fullScreen();
  };
  const deleteFlow = async (id: number) => {
    let res = await delBasisFlow({ id });
    Message.success('删除成功');
    getData();
  };
  const changeStatus = async (id: number) => {
    let res = await putBasisFlowSwitchStatus({ id });
    if (res === 'ok') {
      Message.success('修改成功');
    } else {
      Message.error('修改失败');
    }
    getData();
  };
  const saveData = async (data: FlowItem) => {
    if (data.id) {
      let res = await putBasisFlow(data);
      Message.success('保存成功');
      getData();
    } else {
      let res = await postBasisFlow(data);
      Message.success('添加成功');
      getData();
    }
  };
  onMounted(() => {
    getData();
  });
</script>

<style scoped lang="less">
  .content {
    padding: 16px;
  }
</style>
